<template>
    <div class="index">
        <div class="large-header">
            <!-- 顶部导航 -->
            <HeaderBar></HeaderBar>
            <header>
                <div class="header-banner__inner">
                    <div class="logo-box">
                        <img src="../assets/img/liuhaha-white.png" alt="">
                    </div>
                </div>
            </header>
            <!-- 分类 -->
            <HeaderChannel></HeaderChannel>
        </div>
        <!-- 主体布局 -->
        <div class="main__layout">
            <div class="recommended-container">
                <div class="container">
                    <!-- 轮播图 -->
                    <div class="recommended-swipe">
                        <div class="recommended-swipe-core">
                            <!-- 骨架屏 -->
                            <div class="recommended-swipe-shim">
                                <div class="video-card" v-for="index in 2" :key="index">
                                    <div class="video-card__skeleton">
                                        <div class="video-card__skeleton--cover"></div>
                                        <div class="video-card__skeleton--info">
                                            <div class="video-card__skeleton--right">
                                                <p class="video-card__skeleton--text"></p>
                                                <p class="video-card__skeleton--text short"></p>
                                                <p class="video-card__skeleton--light"></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="shim-card"></div>
                                <div class="shim-card"></div>
                            </div>
                            <!-- 轮播图主体 -->
                            <div class="recommended-swipe-body">
                                <div class="carousel-area">
                                    <Carousel></Carousel>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 随机推荐 -->
                    <div class="feed-card" v-for="index in 11" :key="index">
                        <div class="video-card">
                            <!-- 骨架屏 -->
                            <div class="video-card__skeleton" :class="loadingRandom ? 'loading_animation' : 'hide'">
                                <div class="video-card__skeleton--cover"></div>
                                <div class="video-card__skeleton--info">
                                    <div class="video-card__skeleton--right">
                                        <p class="video-card__skeleton--text"></p>
                                        <p class="video-card__skeleton--text short"></p>
                                        <p class="video-card__skeleton--light"></p>
                                    </div>
                                </div>
                            </div>
                            <!-- 实体内容 -->
                            <div class="video-card__wrap" v-if="!loadingRandom">
                                <a :href="`/video/${randomVideos[index - 1].video.vid}`" target="_blank">
                                    <div class="video-card__image">
                                        <div class="video-card__image--wrap">
                                            <picture class="video-card__cover">
                                                <img :src="randomVideos[index - 1].video.coverUrl"
                                                    :alt="randomVideos[index - 1].video.title">
                                            </picture>
                                        </div>
                                        <div class="video-card__mask">
                                            <div class="video-card__stats">
                                                <div class="video-card__stats--left">
                                                    <span class="video-card__stats--item">
                                                        <i class="iconfont icon-bofangshu"></i>
                                                        <span class="video-card__stats--text">
                                                            {{ handleNum(randomVideos[index - 1].video.play) }}
                                                        </span>
                                                    </span>
                                                    <span class="video-card__stats--item">
                                                        <i class="iconfont icon-danmushu"></i>
                                                        <span class="video-card__stats--text">
                                                            {{ handleNum(randomVideos[index - 1].video.danmu) }}
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="video-card__stats__duration">
                                                    {{ handleTime(randomVideos[index - 1].video.duration) }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <div class="video-card__info">
                                    <div class="video-card__info--right">
                                        <h3 class="video-card__info--tit">
                                            <a :href="`/video/${randomVideos[index - 1].video.vid}`" target="_blank">
                                                {{ randomVideos[index - 1].video.title }}
                                            </a>
                                        </h3>
                                        <div class="video-card__info--bottom">
                                            <div class="video-card__info--icon-text" :style="'display: none;'">已关注</div>
                                            <a class="video-card__info--owner"
                                                :href="`/space/${randomVideos[index - 1].video.uid}`" target="_blank">
                                                <i class="iconfont icon-UPzhu2" :style="''"></i>
                                                <span class="video-card__info--author">{{ randomVideos[index -
                                                    1].user.nickname }}</span>
                                                <span class="video-card__info--date">
                                                    · {{ handleDate(randomVideos[index - 1].video.uploadDate) }}
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 累加推荐 -->
                    <div class="video-card" v-for="(item, index) in cumulativeVideos" :key="index">
                        <!-- 骨架屏 -->
                        <div class="video-card__skeleton hide">
                            <div class="video-card__skeleton--cover"></div>
                            <div class="video-card__skeleton--info">
                                <div class="video-card__skeleton--right">
                                    <p class="video-card__skeleton--text"></p>
                                    <p class="video-card__skeleton--text short"></p>
                                    <p class="video-card__skeleton--light"></p>
                                </div>
                            </div>
                        </div>
                        <!-- 实体内容 -->
                        <div class="video-card__wrap">
                            <a :href="`/video/${item.video.vid}`" target="_blank">
                                <div class="video-card__image">
                                    <div class="video-card__image--wrap">
                                        <picture class="video-card__cover">
                                            <img :src="item.video.coverUrl" :alt="item.video.title">
                                        </picture>
                                    </div>
                                    <div class="video-card__mask">
                                        <div class="video-card__stats">
                                            <div class="video-card__stats--left">
                                                <span class="video-card__stats--item">
                                                    <i class="iconfont icon-bofangshu"></i>
                                                    <span class="video-card__stats--text">
                                                        {{ handleNum(item.video.play) }}
                                                    </span>
                                                </span>
                                                <span class="video-card__stats--item">
                                                    <i class="iconfont icon-danmushu"></i>
                                                    <span class="video-card__stats--text">
                                                        {{ handleNum(item.video.danmu) }}
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="video-card__stats__duration">
                                                {{ handleTime(item.video.duration) }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            <div class="video-card__info">
                                <div class="video-card__info--right">
                                    <h3 class="video-card__info--tit">
                                        <a :href="`/video/${item.video.vid}`" target="_blank" :title="item.video.title">
                                            {{ item.video.title }}
                                        </a>
                                    </h3>
                                    <div class="video-card__info--bottom">
                                        <div class="video-card__info--icon-text" :style="'display: none;'">已关注</div>
                                        <a class="video-card__info--owner" :href="`/space/${item.user.uid}`" target="_blank">
                                            <i class="iconfont icon-uper" :style="''"></i>
                                            <span class="video-card__info--author">{{ item.user.nickname }}</span>
                                            <span class="video-card__info--date">
                                                · {{ handleDate(item.video.uploadDate) }}
                                            </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 骨架屏 -->
                    <div class="video-card" v-for="index in 10" :key="index" :style="hasMore ? '' : 'display: none;'">
                        <div class="video-card__skeleton loading_animation">
                            <div class="video-card__skeleton--cover"></div>
                            <div class="video-card__skeleton--info">
                                <div class="video-card__skeleton--right">
                                    <p class="video-card__skeleton--text"></p>
                                    <p class="video-card__skeleton--text short"></p>
                                    <p class="video-card__skeleton--light"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="feed-roll-btn">
                    <div class="roll-btn" @click="getRandomVideos(); refreshTime++;">
                        <i class="iconfont icon-refresh" :style="`transform: rotate(${refreshTime * 360}deg);`"></i>
                        <span>换一换</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import HeaderBar from '@/components/headerBar/HeaderBar.vue'
import HeaderChannel from '@/components/headerChannel/HeaderChannel.vue'
import Carousel from '@/components/carousel/Carousel.vue';
import { handleTime, handleNum, handleDate } from '@/utils/utils.js';
import { getUserById } from '@/api/user';
import { getVideoList, getMoreVideo, getVisitorVideo } from '@/api/video'
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useUserStore } from '@/store/user';

let headerHight, bottomDistance;

const userStore = useUserStore();

// 是否是固定导航栏
const isFixHeaderBar = ref(false);
// 是否是固定频道栏
const isFixChannel = ref(false);
// 是否显示更多频道
const isChannelDown = ref(false);
// 随机推荐视频列表
const randomVideos = ref([]);
// 累加视频列表
const cumulativeVideos = ref([]);
// 累加视频ID列表
const vids = ref([]);
// 是否正在加载随机推荐
const loadingRandom = ref(true);
// 是否还有更多累加视频
const hasMore = ref(true);
// 是否正在加载更多视频中
const loadingMore = ref(false);
// 刷新次数
const refreshTime = ref(0);
// const headerHeight = ref(0);
// let bottomDistance = 0;

onMounted(async () => {

    headerHight = document.querySelector(".main__layout").offsetTop;
    window.addEventListener('scroll', handleScroll);

    // handleScroll();
    while (bottomDistance < 800 && hasMore.value) {
        await handleScroll();
    }

});

onBeforeUnmount(async () => {
    window.removeEventListener('scroll', handleScroll);
});

// 处理滚动
const handleScroll = async () => {  
    // console.log("滑动");
    // 计算页面底部距离         
    const windowHeight = window.innerHeight;
    const documentHeight = document.documentElement.scrollHeight;
    bottomDistance = documentHeight - (window.scrollY + windowHeight);
    // console.log("底部边距"+ bottomDistance);
    

    // 当距离底部小于800且有更多数据时触发加载数据的函数
    if (bottomDistance < 800 && hasMore.value && !loadingMore.value) {
        console.log("获取更多视频");
        await getCumulativeVideos();
    }
};

// 获取游客随机推荐
const getRandomVideos = async () => {
    loadingRandom.value = true;
    // randomVideos.value = [{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' },{ "vid": 1, 'coverUrl': 'aaa', 'title': '最强明星单卡！', 'play': 10000, 'danmu': 154, 'duration': 4567, 'nickname': '刘哈哈', 'uploadDate': '2024-04-27 18:22:00' }]
    await getVisitorVideo().then(res => {
        randomVideos.value = res.data;
        randomVideos.value.forEach(video => {
            console.log("随机视频：" + JSON.stringify(video.video));
        })
    });
    loadingRandom.value = false;
}

// 获取游客累加推荐
const getCumulativeVideos = async () => {
    loadingMore.value = true;
    let ids = vids.value.join(",");  // 用逗号连接成一个字符串
    await getMoreVideo(ids).then(res => {
        // console.log("ceshi" + JSON.stringify(res));
        hasMore.value = res.data.more;
        cumulativeVideos.value = cumulativeVideos.value.concat(res.data.videos);
        vids.value = vids.value.concat(res.data.vids);
    });
    loadingMore.value = false;
}

getRandomVideos();

</script>

<style scoped>
@media (min-width: 1367px) and (max-width: 1700.9px) {
    .header-banner__inner {
        padding: 0 64px;
    }
}

.index {
    position: relative;
    margin: 0 auto;
    max-width: 2560px;
    background-color: white;
}

.large-header {
    background-color: #fff;
    min-height: 64px;
    position: relative;
    margin: 0 auto;
    max-width: 2560px;
    width: 100%;
    color: #000;
}

header {
    position: relative;
    z-index: 0;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    min-width: 1000px;
    min-height: 155px;
    height: 9.375vw;
    max-height: 240px;
    background-position: center 0;
    background-image: url("../assets/img/header-bg2.png");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    --percentage: 0.5;
}

/* logo */
.header-banner__inner {
    position: relative;
    width: 100%;
    max-width: 2078px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    top: 56px;
    left: 66px;
}

@media (max-width: 1366.9px) {
    .header-banner__inner {
        padding: 0 56px;
    }
}

@media (min-width: 1367px) and (max-width: 1700.9px) {
    .header-banner__inner {
        padding: 0 64px;
    }
}

@media (min-width: 1701px) and (max-width: 2199.9px) {
    .header-banner__inner {
        padding: 0 96px;
        max-width: 2270px;
    }
}

@media (min-width: 2200px) {
    .header-banner__inner {
        max-width: 2078px;
    }
}

.logo-box {
    z-index: 1;
    display: inline-block;
    width: 150px;
    height: 50%;
}

.header-banner__inner img {
    cursor: pointer;
    position: relative;
    top: -50px;
    right: 0;
    margin-bottom: 20px;
    margin-left: 15px;
    width: 200px;
    height: 66px;
    filter: drop-shadow(3px 5px 3px rgba(0, 0, 0, 0.5));
}

/* 主体 */
.main__layout {
    background-color: #fff;
    margin: 0 auto;
    padding: 0 var(--layout-padding);
    max-width: calc(1980px + 2 * var(--layout-padding));
    width: 100%;
}

@media (max-width: 1139.9px) {
    .main__layout {
        width: 1020px;
    }

    .feed-roll-btn {
        left: initial !important;
        right: 10px;
        top: 255px !important;
        transform: initial !important;
    }
}

@media (min-width: 1140px) {
    .main__layout {
        position: relative;
    }

    .recommended-container {
        position: relative;
    }
}

.recommended-container {
    padding-bottom: 60px;
}

.container {
    grid-gap: 20px;
    display: grid;
    position: relative;
    width: 100%;
}

@media (max-width: 1399.9px) {
    .container {
        grid-column: span 4;
        grid-template-columns: repeat(4, 1fr);
    }

    .container>*:nth-of-type(n + 6) {
        margin-top: 40px;
    }

    .container .feed-card:nth-of-type(n + 10) {
        display: none;
    }
}

@media (min-width: 1400px) {
    .container {
        grid-column: span 5;
        grid-template-columns: repeat(5, 1fr);
    }

    .container>*:nth-of-type(n + 8) {
        margin-top: 40px;
    }
}

.recommended-swipe {
    position: relative;
    grid-column: 1/3;
    /* 跨越从第1列到第3列，占据两个网格列的宽度，等价于 grid-column: span 2; */
    grid-row: 1/3;
    /* 跨越从第1行到第3行，占据两个网格行的高度 */
}

.recommended-swipe-core {
    position: relative;
    width: 100%;
}

.recommended-swipe-shim {
    opacity: 0;
    visibility: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    grid-column: span 2;
    grid-row: span 2;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    width: 100%;
    display: grid;
}

.shim-card {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

.recommended-swipe-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateZ(0);
    /* 没有视觉效果的平移，它可以触发 GPU 加速，以提高性能和动画平滑度 */
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--graph_bg_regular);
}

.carousel-area {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    z-index: 0;
}

.feed-roll-btn {
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 2;
    transform: translate(10px);
}

.feed-roll-btn .roll-btn {
    flex-direction: column;
    margin-left: 0;
    height: auto;
    width: 40px;
    padding: 9px;
    background-color: #fff;
    color: var(--text1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 8px;
    font-size: 12px;
    border: 1px solid var(--line_regular);
    transform-origin: center;
    transition: .2s;
    cursor: pointer;
    line-height: 1.15;
}

.feed-roll-btn .roll-btn:hover {
    background-color: var(--graph_bg_thick);
}

.feed-roll-btn .roll-btn .iconfont {
    line-height: 16px;
    margin-bottom: 6px;
    transition: transform .5s ease;
}

@media (max-width: 1120px) {
    .feed-roll-btn {
        opacity: 0.8;
    }
}

@media (max-width: 1399.9px) {
    .container {
        grid-column: span 4;
        grid-template-columns: repeat(4, 1fr);
    }

    .container>*:nth-of-type(n + 6) {
        margin-top: 40px;
    }

    .container .feed-card:nth-of-type(n + 10) {
        display: none;
    }
}

@media (min-width: 1400px) {
    .container {
        grid-column: span 5;
        grid-template-columns: repeat(5, 1fr);
    }

    .container>*:nth-of-type(n + 8) {
        margin-top: 40px;
    }
}
</style>